<template>
  <div id="WareHouse">
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 80px;
      "
    >
      <el-form :inline="true" class="filter-form" style="width: 600px">
        <el-form-item label="商品">
          <el-select v-model="selectgoods" placeholder="请选择商品">
            <el-option>全部</el-option>
            <el-option
              v-for="goods in productList"
              :key="goods.goodcode"
              :value="goods.goodcode"
              :label="goods.goodname"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货架">
          <el-input v-model="selectshelf" placeholder="请输入货架名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-dialog title="修改商品货架" :visible.sync="dialogVisible" width="40%">
        <el-form>
          <el-form-item label="商品">
            <el-select v-model="addShelf.goodscode" placeholder="请选择商品">
              <el-option
                v-for="goods in productList"
                :key="goods.goodcode"
                :value="goods.goodcode"
                :label="goods.goodname"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="仓库">
            <el-select
              v-model="addShelf.repositoryid"
              style="width: 100%; max-width: 300px"
            >
              <el-option
                v-for="store in storeList"
                :key="store.shId"
                :label="store.storeHomeName"
                :value="store.shId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="货架名称">
            <el-input
              placeholder="例：1-1-1"
              v-model="addShelf.shelfname"
            ></el-input>
          </el-form-item>

          <el-form-item label="备注">
            <el-input v-model="addShelf.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateShelf()">确定</el-button>
        </div>
      </el-dialog>
      <div class="action-buttons" style="display: flex; gap: 10px">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-dialog
          title="新增商品货架"
          :visible.sync="dialogVisibled"
          width="40%"
        >
          <el-form>
            <el-form-item label="商品">
              <el-select v-model="addShelf.goodscode" placeholder="请选择商品">
                <el-option
                  v-for="goods in productList"
                  :key="goods.goodcode"
                  :value="goods.goodcode"
                  :label="goods.goodname"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="仓库">
              <el-select
                v-model="addShelf.repositoryid"
                style="width: 100%; max-width: 300px"
              >
                <el-option
                  v-for="store in storeList"
                  :key="store.shId"
                  :label="store.storeHomeName"
                  :value="store.shId"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="货架名称">
              <el-input
                placeholder="例：1-1-1"
                v-model="addShelf.shelfname"
              ></el-input>
            </el-form-item>

            <el-form-item label="备注">
              <el-input v-model="addShelf.remark"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibled = false">取消</el-button>
            <el-button type="primary" @click="saveShelf()">确定</el-button>
          </div>
        </el-dialog>
        <!-- <el-button type="success" @click="handlePrintLabels"
          >打印货架标签</el-button
        > -->
        <!-- <el-button type="warning" @click="handleDisable">禁用</el-button> -->
        <el-button type="danger" @click="deletemany">删除</el-button>
        <!-- <el-button type="primary" @click="handleImport">导入</el-button>
        <el-button type="primary" @click="handleExport">导出</el-button> -->
        <!-- <el-button type="info" @click="handleExport">修改</el-button> -->
      </div>
    </div>
    <div style="height: 600px; width: 1500px">
      <el-row style="margin-top: 1%" :gutter="20">
        <!-- 左侧 仓库列表 -->
        <el-col
          style="height: 350px"
          :span="span"
          :class="[span != '8' ? 'span1' : 'span1']"
        >
          <div style="position: relative; width: 100%; height: 100%">
            <el-drawer
              class="drawerClass"
              style="position: absolute"
              :append-to-body="false"
              :modal="false"
              :show-close="false"
              :wrapperClosable="false"
              size="100%"
              :visible.sync="drawer"
              direction="ltr"
            >
              <el-card
                class="box-card"
                style="position: relative; height: 500px"
              >
                <div>
                  选择仓库
                  <el-select
                    v-model="selectSid"
                    @change="changStore()"
                    placeholder="全部仓库"
                    style="width: 100%; max-width: 300px"
                  >
                    <el-option>全部</el-option>
                    <el-option
                      v-for="store in storeList"
                      :key="store.shId"
                      :label="store.storeHomeName"
                      :value="store.shId"
                    ></el-option>
                  </el-select>
                </div>
              </el-card>
            </el-drawer>
            <div
              style="
                position: absolute;
                z-index: 999999999;
                cursor: pointer;
                top: 30%;
                right: 10px;
              "
              :class="[drawer ? 'toggle-text' : 'toggle-text']"
              @click="clickImg"
            >
              <span v-show="!drawer">></span>
              <span v-show="drawer"><</span>
            </div>
          </div>
        </el-col>
        <!-- 右侧 用户列表 -->
        <el-col :span="span1" :class="[span1 != '15' ? 'span1' : 'span1']">
          <el-card class="box-card" style="height: 500px">
            <div>
              货架分页
              <el-table
                :data="shelfs"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="editBrand(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="deleteBrand(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="id"
                  label="货架编号"
                  width="180"
                ></el-table-column>
                <el-table-column
                  prop="goodsname"
                  label="商品名称"
                  width="180"
                ></el-table-column>
                <el-table-column
                  prop="goodscode"
                  label="商品编码"
                  width="180"
                ></el-table-column>

                <el-table-column
                  prop="shelfname"
                  label="货架名称"
                  width="180"
                ></el-table-column>
                <el-table-column label="仓库" width="120">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.repositoryid">
                      <el-option
                        v-for="store in storeList"
                        :key="store.shId"
                        :label="store.storeHomeName"
                        :value="store.shId"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="createTime"
                  label="时间"
                  width="180"
                ></el-table-column>

                <!-- <el-table-column label="状态" width="180">
                  <template slot-scope="scope">
                    <el-switch
                      v-model="scope.row.status"
                      @change="handleStatusChange(scope.row)"
                    ></el-switch>
                  </template>
                </el-table-column> -->
                <el-table-column
                  prop="remarks"
                  label="备注"
                  width="180"
                ></el-table-column>
              </el-table>
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5]"
                :page-size="pageInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total"
              >
              </el-pagination>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "WareHouse",
  data() {
    return {
      selectgoods: "",
      selectshelf: "",
      goodscode: "",
      shelfs: [],
      pageInfo: "",
      storeList: [],
      productList: [], // 商品列表数据
      selectSid: "",
      cid: "",
      addShelf: {
        goodscode: "",
        repositoryid: "",
        shelfname: "",
        remark: "",
        cid: "",
      },
      dialogVisibled: false,
      dialogVisible: false,
      span: 1, // 初始值设为 1，表示收缩状态
      span1: 23,
      drawer: false, // 初始值设为 false，表示仓库列表是收缩的
      currentPage: 1, // 当前页码
      handleNodeClick(data) {
        this.selectedWarehouseId = data.id;
        this.fetchProductsByWarehouse(this.selectedWarehouseId);
      },
      selectedWarehouseId: null, // 选中的仓库ID
      multipleSelection: [],
      ids: [],
    };
  },
  created() {
    this.cid = window.sessionStorage.getItem("cid");

    this.getList(1);
  },
  methods: {
    search() {
      this.getList(1);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = this.multipleSelection.map((item) => item.id);
      console.log("ids", this.ids);
    },
    saveShelf() {
      this.addShelf.cid = this.cid;
      console.log(this.addShelf);
      this.axios
        .post("/erp/goods/shelf/add", {
          ...this.addShelf,
        })
        .then((rs) => {
          if (rs.data.result == true) {
            alert("添加成功！");
            this.getList(1);
            this.dialogVisibled = false;
            this.addShelf = {
              goodscode: "",
              repositoryid: "",
              shelfname: "",
              remark: "",
              cid: "",
            };
          } else {
            alert("添加失败");
          }
        });
    },
    changStore() {
      this.getList(1, this.selectSid);
    },
    getGoods() {
      this.axios({
        url: "/erp/goods/goods/getAllGoods",
      })
        .then((rs) => {
          this.productList = rs.data.list;
          console.log("productList", this.productList);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getStoreList() {
      this.axios
        .get("/info/storeHouse/getAllStore", {
          params: {
            cId: 1,
          },
        })
        .then((rs) => {
          this.storeList = rs.data.storeList;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleAdd() {
      this.dialogVisibled = true;
    },
    getList(pageNum, repositoryid) {
      this.axios({
        url: "/erp/goods/shelf/getList",
        params: {
          pageSize: 5,
          pageNum,
          repositoryid,
          shelfname: this.selectshelf,
          goodscode: this.selectgoods,
        },
      })
        .then((rs) => {
          this.getGoods();
          this.getStoreList();
          this.shelfs = rs.data.pageInfo.list;
          this.pageInfo = rs.data.pageInfo;
          console.log(this.pageInfo);
        })
        .catch((error) => {
          console.log(error);
        });
    },

    clickImg() {
      this.drawer = !this.drawer;
      if (this.drawer) {
        this.span = 6;
        this.span1 = 18;
      } else {
        this.span = 1;
        this.span1 = 23;
      }
    },
    resetDialogForm() {
      this.dialogForm = {
        product: "",
        warehouse: "默认仓库",
        area: "",
        shelfName: "",
        remarks: "",
      };
    },
    handleCurrentChange(newPage) {
      this.getList(newPage);
    },
    editBrand(index, row) {
      this.addShelf = row;
      this.addShelf.cid = this.cid;
      console.log(this.addShelf);
      this.dialogVisible = true;
    },
    deleteBrand(index, row) {
      var id = row.id;
      if (confirm("是否删除该商品？")) {
        this.axios({
          url: "/erp/goods/shelf/delOne",
          params: {
            id,
          },
        }).then((rs) => {
          if (rs.data.result == true) {
            alert("删除成功！");
            this.getList(1);
          } else {
            alert("删除失败");
          }
        });
      }
    },
    deletemany() {
      var params = new FormData();
      params = {
        ids: JSON.stringify(this.ids),
      };
      this.axios
        .post("/erp/goods/shelf/del", {
          ...params,
        })
        .then((rs) => {
          if (rs.data.result == true) {
            alert("删除成功！");
            this.getList(1);
          } else {
            alert("删除失败！");
          }
        });
    },
    updateShelf() {
      this.axios
        .post("/erp/goods/shelf/update", {
          ...this.addShelf,
        })
        .then((rs) => {
          if (rs.data.result == true) {
            alert("修改成功！");
            this.getList(1);
            this.dialogVisible = false;
            this.addShelf = {
              goodscode: "",
              repositoryid: "",
              shelfname: "",
              remark: "",
              cid: "",
            };
          } else {
            alert("修改失败");
          }
        });
    },
  },
};
</script>
<style>
.toggle-text {
  font-size: 16px;
  color: #409eff;
}
.full-height {
  height: 100vh;
}
.action-buttons {
  position: relative;
  bottom: 20px;
  float: right;
  margin: 20px 0;
}
.action-buttons .el-button {
  margin-right: 10px;
}
</style>
